<template>
  <div class="height: 100%;" v-init-screen-h="30">
    <!-- <dv-border-box-12 style="height: 100%" :class="'echarts_box'"> -->
    <div
      v-if="!option.series.length"
      class="nodata flex-x flex-center"
      style="color: #fff;height: 100%;"
    >
      请选择
    </div>
    <div
      v-else
      style="height: 100%;overflow: hidden;"
      class="chart"
      ref="chart"
    ></div>
  </div>
</template>

<script>
import { mixinReszie } from "@/mixin/resize.js";

import { generateId } from "@/utils";
export default {
  mixins: [mixinReszie],
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      lineChart: null,
      fullscreen: false,
      brder1Key: generateId(),
      chartKey: generateId()
    };
  },
  watch: {
    option: {
      handler(newVal) {
        console.log("获取曲线数据>> ", newVal);
        if (newVal.series && newVal.series.length) {
          this.init();
        } else {
          this.disposeChart();
        }
      },
      deep: true
    }
  },
  methods: {
    disposeChart() {
      if (this.lineChart) {
        this.lineChart.dispose();
      }
    },
    init() {
      this.$nextTick(() => {
        this.lineChart = this.$echarts.init(this.$refs.chart);
        this.lineChart.setOption(this.option, true);
      });
    }
  },
  mounted() {
    // this.init();
  }
};
</script>

<style scoped lang="scss">
.echarts_box {
  .chart {
    width: 100%;
    /* height: 260px; */
  }
}
.fixed_echarts {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100% !important;
  height: 100% !important;
  background: url(../../../../../assets/images/applicationCenter/app_bg.jpg)
    no-repeat 100%;
  background-size: cover;
}
</style>
